<template>
  <div>
    <!-- 页码 -->
    <div class="pageSelect">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="1"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>

    <!-- 表格两列 -->
    <div class="leftStyle">
      <ul
        v-for="(item, index) in wordslist"
        :key="index"
        @click="showWord(index)"
      >
        <li :class="{ active: index == count ? true : false }">
          <a href="javascript:void(0);">{{ item.name }}</a>
        </li>
      </ul>
    </div>

    <!-- 卡片 -->
    <el-card shadow="hover">
      <div class="box">
        <div class="box-item">
          <h1>{{ single_word.name }}</h1>
        </div>
        <div class="box-item">
          <span>{{ single_word.symbol }}</span>
        </div>

        <div class="box-item">
          <div class="audioStyle">
            <audio :src="single_word.sound" controls></audio>
          </div>
        </div>
        <div class="box-item">
          <p>{{ single_word.desc }}</p>
        </div>

        <div class="box-item">
          <el-button @click="preWord">上一个</el-button>
          <el-button @click="nextWord">下一个</el-button>
        </div>
        <!-- 按钮 -->
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // queryInfo: {},
      wordslist: [],
      single_word: {},
      count: 0,
      wordLen: 0,
      isActive: false,
      // 总课程数目
      total: 0,
    };
  },
  created() {
    this.getWordslist();
  },
  methods: {
    // 获取单词数据列表
    async getWordslist() {
      // var queryInfo = this.$route.query.querInfo;
      var class_id = this.$route.query.class_id;
      var course_num = this.$route.query.course_num;
      this.total = parseInt(course_num);
      console.log(this.total);

      // 第一次请求默认是从第一个课程开始
      const { data: res } = await this.$axios.get("words", {
        params: {
          class_id: class_id,
          course: 1,
        },
      });
      if (res.code !== 1000) {
        return alert("请求数据失败");
      }
      this.wordslist = res.datas;
      this.wordLen = res.datas.length;

      // console.log( res.datas.length);
      this.single_word = this.wordslist[0];
      console.log(this.wordslist);
    },

    // 单词显示
    showWord(index) {
      this.single_word = this.wordslist[index];
      this.count = index;
    },
    // 上一个单词
    preWord() {
      this.count--;
      if (this.count < 0) {
        this.count++;
        return;
      }
      this.single_word = this.wordslist[this.count];
    },
    // 下一个单词
    nextWord() {
      this.count++;
      if (this.count > this.wordLen - 1) {
        this.count--;
        return;
      }
      this.single_word = this.wordslist[this.count];
    },

    // 当前页面改变,获取到页码值,请求相应课程的单词，渲染单词
    async currentChange(val) {
      console.log(val);
      var class_id = this.$route.query.class_id;
      const { data: res } = await this.$axios.get("words", {
        params: {
          class_id: class_id,
          course: val,
        },
      });
      if (res.code !== 1000) {
        return alert("请求数据失败");
      }
      this.wordslist = res.datas;
      this.wordLen = res.datas.length;

      // console.log( res.datas.length);
      this.single_word = this.wordslist[0];
      this.count = 0;
    },
  },
};
</script>

<style scoped>
.el-card {
  position: fixed;
  width: 400px;
  height: 400px;
  top: 26%;
  left: 50%;
  z-index: 10000;
}
.box-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box h1 {
  font-size: 3em;
  margin: 0;
}
.audioStyle {
  position: absolute;
  width: 30px;
  height: 30px;
  overflow: hidden;
  display: inline-block;
  border-radius: 18px;
}

audio {
  position: absolute;
  height: 40px;
  top: -5px;
  left: -11px;
}
.row-button {
  position: absolute;
  width: 100%;
  bottom: -26%;
  left: 13%;
}
.el-table-column:hover {
  cursor: pointer;
  color: blue;
}
.leftStyle {
  /* border-top: solid 1px #dedede; */
  position: relative;
  border-right: solid 1px #dedede;
  width: 200px;
}
.leftStyle ul {
  position: relative;
}
.leftStyle ul li {
  width: 100%;
  position: relative;
  display: block;
}
.leftStyle ul li a {
  width: 100%;
  position: relative;
  display: inline-block;
  color: #606266;
}
.leftStyle ul li a::before {
  content: "";
  position: absolute;
  top: 60%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: skyblue;
  transform: translateY(-50%) scale(0);
  transform-origin: right;
  transition: 0.5s transform;
}
.leftStyle ul li a:hover::before {
  transform: translateY(-50%) scale(1);
  transform-origin: left;
  transition: 0.5s transform;
}
.active::before {
  content: "";
  position: absolute;
  top: 60%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #8e76e3;
  transform: translateY(-50%) scale(1);
}

/* 页码样式 */
.pageSelect {
  position: fixed;
  top: 15%;
  left: 38%;
  right: 0;
  bottom: 0;
  /* width: 80%;
  margin: 0 auto; */
  z-index: 111;
}
</style>